<template>
	<view class="container">
		<view class="friendList">
			<!--遍历分组后的好友列表-->
			<view class="friendItem" v-for="friend in friendList" :key="friend.id">
				<!--显示好友头像、名称和标签-->
				<view class="imgContent">
					<image :src="friend.wxUserAvatar" class="avatar" />
				</view>
				
				<view class="friend-name">{{ friend.wxUsername }}</view>
				<view class="flag"  v-if="friend.wxUserStatus!=0" :class="friend.wxUserStatus==1? 'cloudFlag':'districtFlag'" >{{ userType[friend.wxUserStatus] }}</view>
			</view>
		</view>
	     <view class="empty" v-if="friendList.length==0">
	     	<view class="icon">
	     		
	     	</view>
			<view class="desc">
				您还未与其他用户进行绑定
			</view>
	     </view>
	
	</view>
	</view>
</template>

<script>
	import * as userInfoApi from '@/api/my/my.js'
	export default {
		data() {
			return {
				// 分组后的好友列表  
				friendList: [],
				userType:{
					
					0:'普通用户',
					1:'云集服务商',
					2:'区县服务商'
				}
			}
		},

		onLoad() {
			this.getFriendList();
		},
		methods: {
			async getFriendList() {
				const res = await userInfoApi.getFriendList();
				this.friendList=res.data.data;
				console.log("好友列表");
				console.log(res)
			},



		}
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
	}
	
	.empty{
		box-sizing: border-box;
		position: absolute;
		top: 550rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		
		
		.desc{
			box-sizing: border-box;
			font-size: 40rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 57.92rpx;
			color: rgba(102, 102, 102, 1);
		}
		
	}

	.friendList {
		width: 100%;

		.group-title {
			font-size: 28rpx;
			font-weight: bold;
			padding: 10rpx 0;
		}

		.friendItem {
			
			margin-bottom: 20rpx;
			
			width: 100%;
			box-sizing: border-box;
			height: 80rpx;
			display: flex;
			align-items: center;

			.imgContent {
				box-sizing: border-box;
				width: 76rpx;
				height: 76rpx;
				border-radius: 6rpx;
				margin-right: 10rpx;
				overflow: hidden;

				.avatar {
					width: 76rpx;
					height: 76rpx;
					opacity: 1;
					border-radius: 6rpx;
					box-sizing: border-box;
					


				}

			}

			.friend-name {
				font-size: 32rpx;
				color: rgba(0, 0, 0, 1);
			}

			.flag {
				margin-left: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 6rpx;
				box-sizing: border-box;
				width: 126rpx;
				height: 36rpx;
				font-size: 20rpx;
			}

			.cloudFlag{
				background-color: rgba(212, 48, 48, 1);
				color: rgba(224, 209, 186, 1);
			}

			.districtFlag {
				background: rgba(49, 48, 56, 1);
				color: rgba(224, 209, 186, 1);
			}
		}
	}
</style>